<template>
  <el-dialog class="export_dialog" width="20%" v-model="showDialog" :close-on-click-modal="false"
    :modal-append-to-body="false" :close-on-press-escape="false">
    <template #header>
      {{ dialogTitle }}
    </template>
    <div class="container">
      <p>该页面涉到经纬度和站名,导出需要经过管理员审核,</p>
      <p>是否需要继续导出,或者剔除经纬度和站名进行导出</p>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="directExport">直接导出</el-button>
        <el-button type="primary" plain @click="exportSubmit">提交审核</el-button>
        <el-button @click="showDialog = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
// core
import { ref, defineEmits } from "vue";
import { useRoute } from 'vue-router'

// api相关 - 工具
import { apiCommon } from "@/utils/index.js";
import * as exportApi from "@/api/biz/exportApi";

import { useConfigStore } from '@/store/modules/config.js'  // store
import useUserStore from '@/store/modules/user'

import { ElMessage } from 'element-plus'

const props = defineProps({
  serviceName: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: '工单导出'
  },
})

let queryParams = null

const router = useRouter();

const userStoreData = useUserStore()

// 自定义事件
const emit = defineEmits([
  "directExport",  // 直接导出
]);

const dialogTitle = ref('');
const showDialog = ref(false);

const currentRoute = router.currentRoute.value;
const { meta } = currentRoute

// 直接导出
const directExport = (width) => {
  emit('directExport')

  showDialog.value = false;
}

// 提交审核
const exportSubmit = async () => {
  const { userName } = userStoreData.userMseeage

  let params = {
    param: JSON.stringify(queryParams),  // 导出的查询参数
    creator: userName,  // 创建人
    serviceName: props.serviceName,
    type: props.type  // 导出类型(工单导出、环境维度导出)
  }
  // console.log('params', params)

  let addExportRes = await apiCommon(exportApi.submitApprove, params);
  showDialog.value = false;

  ElMessage.success(`提交成功`);

  let time = setTimeout(() => {
    router.push({
      path: '/download',
      query: {
        title: meta.title
      }
    })
    clearTimeout(time)
  }, 1000)
}

/**
 * 父组件调弹框显示方法
 */
const show = (val) => {
  showDialog.value = true;

  dialogTitle.value = `导出 - ${meta.title}`

  queryParams = val
};

defineExpose({ show });
</script>

<style scoped lang="scss">
.export_dialog {
  .container {
    p {
      font-size: 14px;
      color: #333;

      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }
  }
}
</style>

<style lang="scss">
.export_dialog {
  top: 16vh !important;
}
</style>
